<template>
	<div class="page" v-loading="loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/shop' }">融酒商城</el-breadcrumb-item>
			<el-breadcrumb-item>修改分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form class="content" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
			<el-form-item label="分类名称" prop="categoryName">
				<el-input size="small" v-model="ruleForm.categoryName"></el-input>
			</el-form-item>
			<el-form-item label="排序号" prop="sequence">
				<el-input size="small" type="numbber" v-model="ruleForm.sequence"></el-input>
			</el-form-item>
			<el-form-item label="分类图片">
				<div v-if="ruleForm.categoryImage!='' && updateImageCtrl == false">
					<img :src="ruleForm.categoryImage" class="goods-image-show">
					<span @click="updateImage" class="red cursor">修改</span>
				</div>
				<upload-image v-on:sendImageData="getImageData" v-else></upload-image>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
				<el-button size="small" @click="utils.back">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import uploadImage from '../../common/uploadImage.vue';
export default {
	name: 'add',
	data() {
		return {
			loading: false,
			ruleForm: {
				"categoryImage": "",
				"categoryName": "",
				"deep": 1,
				"parentId": 0,
				"sequence": 1
			},

			rules: {
				categoryName: [{
					required: true,
					message: '分类名称不能为空',
					trigger: 'blur'
				}],
				sequence: [{
					required: true,
					message: '排序不能为空',
					trigger: 'blur'
				}]
			},
			updateImageCtrl: false, //是否修改图片
		}
	},
	components: {
		uploadImage
	},
	created() { },
	mounted() {
		this.getDetails();
	},
	methods: {
		updateImage() {
			this.updateImageCtrl = !this.updateImageCtrl;
		},
		// 获取详情
		getDetails() {
			this.loading = true;
			this.$post("categoryDetails", {
				id: this.$route.params.id
			}).then(res => {
				this.loading = false;
				this.ruleForm = res.data;
			}).catch((e)=>{
				this.loading = false;
			})
		},
		// 获取子组件传来的图片地址
		getImageData(data) {
			this.ruleForm.categoryImage = data;
		},
		// 提交
		submitForm(formName) {
			this.loading = true;
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$post("categorySave", this.ruleForm).then(res => {
						this.loading = false;
						if (res.code == 200) {
							this.$msg.success("修改成功～");
							this.$router.back();
						} else {
							this.$msg.warning(res.message);
						}
					});
				} else {
					this.$msg.error("网络或服务器错误");
					this.loading = false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	}

}
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  position: relative;
  .goods-image-show {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
}
</style>